<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流_记录视频播放位置</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .播放器版面 {
            width: 1200px;
            margin: 0 auto;
        }

        .视频 video {
            width: 100%;
            padding: 20px 0;
        }

        .导航 {
            position: fixed;
            top: 280px;
            right: 20px;
            z-index: 999;
            background: #fff;
            border: 1px solid #e4e4e4;
            width: 60px;
        }

        .导航 a {
            display: block;
            padding: 10px;
            text-decoration: none;
            text-align: center;
            color: #999;
        }

        .导航 a.active {
            color: #1286ff;
        }

        .outline {
            padding-bottom: 300px;
        }
    </style>
</head>
<body>
<!--
案例: 页面打开，可以记录上一次的视频播放位置
-->

<div class="播放器版面">
    <div class="标题">
        <a href="http://pip.itcast.cn">
            <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt=""/>
        </a>
    </div>
    <div class="视频">
        <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="导航">
        <a href="javascript:;" data-ref="video">视频介绍</a>
        <a href="javascript:;" data-ref="intro">课程简介</a>
        <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
</div>

<!--加载网络版 lodash库, 我们需要用到里面的 _.throttle节流函数-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>
    // 1. 获取元素  要对视频进行操作
    const 视频 = document.querySelector('video')
    // 视频事件, ontimeupdate播放位置
    视频.ontimeupdate = _.throttle(() => { // 节流, 1秒记录一次播放位置
        // console.log(视频.currentTime) 获得当前的视频时间
        // 把当前的时间存储到本地存储
        localStorage.setItem('播放的当前位置', 视频.currentTime)
    }, 1000)

    // 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给  video.currentTime
    视频.onloadeddata = () => {
        // console.log(111)
        视频.currentTime = localStorage.getItem('播放的当前位置') || 0 // 短路写法,最开始是没有本地存储信息的,所以要在来个判断
        // 读取本地存储,时间位置, 赋值给视频的时间位置.  实现再次打开因为显示视频已经播放的位置
    }
</script>
</body>
</html>